<template>
  <div class="login">
    <el-container>
      <el-header >生态林一卡通系统</el-header>
      <br/>
      <el-main>
        <el-input class="cardInput" v-model="cardNumber" placeholder="请输入卡号"/>
        <br/>
        <el-button class="confirmButton" type="primary" style="width:180px" @click="cardNumberComfirm()">确定</el-button>
        <el-button class="confirmButton" type="primary" style="width:100px" @click="chargeComfirm()">充值</el-button>
      </el-main>
      <el-footer>
        <p @click="route.push('/admin')">Copy Right: 龙吟信息</p>
      </el-footer>
    </el-container>
  </div>
</template>

<script lang="ts">
  import { reactive, toRefs } from 'vue'
  import { ElMessage } from 'element-plus'
  // @ts-ignore
  import { useStore } from '../store'
  import { useRouter } from 'vue-router'
  import apiSet from '../plugins/dbApi'

  export default {
    setup(){
      const store = useStore()
      const route = useRouter()

      const data = reactive({
        cardNumber : store.getUserInfo.cardNumber,
      })

      const method = reactive({
        cardNumberComfirm: () => {
          if(!data.cardNumber){
            ElMessage.warning('请输入卡号')
            return
          } else if (!/^\d+$/.test(data.cardNumber)) {
            ElMessage.warning('卡号必须是纯数字')
            return
          }
          apiSet.getUserInfo(data.cardNumber).then(res => {
            if(res.status == 200){
              ElMessage.success('登录成功')
              route.push('/shop')
            } else {
              ElMessage.error(res.message)
            }
          })
        },
        chargeComfirm: () => {
          route.push('/charge')
        }
      })
      return {
        ...toRefs(data),
        ...toRefs(method),
        route,
      }
    }
  }
</script>

<style scoped>
  @import '../assets/css/login.css';
</style>